<template>
  <view>
    <Header type="back" title="添加收货地址" />

    <view class="w-100" :class="'h' + bar_h"></view>
    <view
      class="bg-f8ff w-100 ab left0 bottom0 rounded-120-bottom ov-hd-y"
      :class="'top' + bar_h"
    >
      <view class="w-100 py-5 px-4">
        <view class="w-100 h116 f-b-c">
          <view class="font32 t-20 font600">收货人</view>
          <view class="bg-white show0 circle20">
            <input
              class="uni-input h90 font28 px-2 w476"
              v-model="query.name"
              placeholder="请输入收货人"
            />
          </view>
        </view>

        <view class="w-100 h116 f-b-c">
          <view class="font32 t-20 font600">联系电话</view>
          <view class="bg-white show0 circle20">
            <input
              class="uni-input h90 font28 px-2 w476"
              type="number"
              maxlength="11"
              v-model="query.mobile"
              placeholder="请输入联系手机号"
            />
          </view>
        </view>

        <view class="w-100 h116 f-b-c">
          <view class="font32 t-20 font600">所在区域</view>
          <view class="bg-white show0 circle20 w516 h90 font28 px-2">
            <AddressPicker
              style="line-height: 90rpx"
              class="t-3"
              @change="change"
              :level="3"
              >{{ planLocate }}
            </AddressPicker>
          </view>
        </view>

        <view class="w-100 f-s-a pt-2">
          <view class="font32 t-20 font600">详细地址</view>
          <view class="bg-white show0 circle20">
            <textarea
              v-model="query.address"
              class="font28 p-2 w476 h180"
              placeholder="请输入详细地址"
            />
          </view>
        </view>

        <view class="w-100 h116 f-b-c pt-4">
          <view class="font32 t-20 font600">设为默认收货地址</view>
          <view>
            <switch :checked="query.def" @change="set_def" />
          </view>
        </view>

        <view class="w-100 h220"></view>
      </view>
    </view>

    <view class="w-100 px-4 fixed bottom0 pb-5 left0 z-999 option">
      <view
        class="w-100 f-c-c font28 t-20 font600 bg-theme h100 circle120"
        @click="set_address_add"
      >
        保存
      </view>
    </view>
  </view>
</template>

<script>
import Header from "../../components/header.vue";
import AddressPicker from "@/components/lingdang-AddressPicker/AddressPicker.vue";

import { address_add } from "../../api/mall.js";

export default {
  components: {
    Header,
    AddressPicker,
  },
  data() {
    return {
      bar_h: 0,
      query: {
        address: "",
        city: "",
        county: "",
        def: true,
        mobile: "",
        name: "",
        province: "",
        zipCode: "",
      },
      planLocate: "请选择所在区域",
    };
  },
  created() {
    const { statusBarHeight } = uni.getStorageSync("systemInfo");
    this.bar_h = 100 + statusBarHeight / (uni.upx2px(100) / 100); // 状态栏高度  +  预留背景高度 整个背景高度
  },
  methods: {
    bindTextAreaBlur(e) {
      console.log(e.detail.value);
      this.query.address = e.detail.value;
    },
    async set_address_add() {
      const { code, body } = await address_add(this.query);
      if (code === "0") {
        uni.showToast({
          title: "保存成功",
          icon: "none",
        });
        this.query = {};
        this.query.def = true;
        this.planLocate = "请选择所在区域";
        //保存成功后返回上一级并刷新地址
        setTimeout(() => {
          uni.$emit("updateAdress");
          uni.navigateBack({
            delta: -1,
          });
        }, 1000);
      }
    },
    set_def(val) {
      this.query.def = val.detail.value;
    },
    change(result) {
      console.log(JSON.stringify(result.data));
      this.planLocate = "";
      let code = "";
      result.data.forEach((item, index) => {
        if (index === 0) {
          this.planLocate += item.name;
          code += item.id;
        } else {
          this.planLocate += "-" + item.name;
          code += "-" + item.id;
        }
      });
      let address = this.planLocate.split("-");

      this.query.zipCode = code;
      this.query.province = address[0];
      this.query.city = address[1];
      this.query.county = address[2];
    },
  },
};
</script>

<style lang="scss" scoped>
.rounded-120-bottom {
  border-radius: 0 80rpx 0 0;
}
</style>
